<template>
    <BaseCard :style="{ height: rowHeight }" body-style="padding-bottom: 0">
        <el-form :inline="true">
            <el-row>
                <el-col :span="18">
                    <el-form-item label="用户搜索">
                        <el-input v-model="searchData.searchValue" placeholder="请输入内容" clearable>
                            <template #prepend>
                                <el-select v-model="searchData.searchType" placeholder="请选择" style="width: 86px"
                                    clearable>
                                    <el-option label="全部" value="" />
                                    <el-option label="UID" value="_id" />
                                    <el-option label="手机号" value="phone" />
                                    <el-option label="用户昵称" value="name" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="用户等级">
                        <el-select v-model="searchData.gradeId">
                            <el-option v-for="item in userGradeData.rows" :key="item._id" :label="item.name"
                                :value="String(item._id)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户分组">
                        <el-select v-model="searchData.groupId">
                            <el-option v-for="item in userGroupData.rows" :key="item._id" :label="item.name"
                                :value="String(item._id)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户标签">
                        <el-input-tag v-model="checkedTagNames" @click="userTagRef?.openDialog" />
                    </el-form-item>
                    <el-form-item label="用户搜索">
                        <el-input />
                    </el-form-item>
                    <el-form-item label="用户搜索">
                        <el-input />
                    </el-form-item>
                    <el-form-item label="用户搜索">
                        <el-input />
                    </el-form-item>
                    <el-form-item label="用户搜索">
                        <el-input />
                    </el-form-item>
                    <el-form-item label="用户搜索">
                        <el-input />
                    </el-form-item>
                    <el-form-item label="用户搜索">
                        <el-input />
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="flex-end" style="align-items: flex-start;">
                    <div>
                        <el-button type="primary" @click="onSearch">搜索</el-button>
                        <el-button @click="onReset">重置</el-button>
                        <el-button v-if="rowHeight == 'auto'" @click="rowHeight = '72px'" link type="primary">
                            收起
                            <el-icon class="el-icon--right">
                                <ArrowUp />
                            </el-icon>
                        </el-button>
                        <el-button v-else @click="rowHeight = 'auto'" link type="primary">
                            展开
                            <el-icon class="el-icon--right">
                                <ArrowDown />
                            </el-icon>
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </BaseCard>
    <UserTagDialog ref="userTagRef" @getCheckedUserTag="getCheckedUserTag" />
</template>

<script setup lang="ts">
import { useFindData } from '@/composables/findData';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import UserTagDialog from './UserTagDialog.vue';
// 搜索栏没有展开时，一行的高度
const rowHeight = ref('72px');
const userTagRef = useTemplateRef('userTagRef')
const searchData = defineModel<any>('searchData')
const emit = defineEmits(['findUser', 'resetSearchForm']);
// 表单回显时需要的标签名数组
const checkedTagNames = ref<string[]>([]);
// 保存的是选中的标签对象（_id和name）
let checkedTagArray: any[] = [];

const { userGradeData, findUserGradeAsync, userGroupData, findUserGroupAsync } = useFindData();

onMounted(() => {
    findUserGradeAsync();
    findUserGroupAsync();
})

// 当标签名的数组发生改变时，同步修改标签id的数组
watch(checkedTagNames, () => {
    searchData.value.tagIds = checkedTagArray
        .filter(item => checkedTagNames.value.includes(item.name))  // 筛选出当前保留的标签对象
        .map(item => item._id)  // 处理标签对象数据格式，只留下标签id
}, { deep: true })

function onSearch() {
    emit('findUser');
}

function onReset() {
    emit('resetSearchForm');
}

// 绑定到子组件身上，用来获取子组件内部选中的“用户标签”数组
function getCheckedUserTag(checkedTag: any[]) {
    checkedTagArray = checkedTag;
    // 将选中的标签id保存到搜索条件中
    searchData.value.tagIds = checkedTag.map(item => item._id); // [1, 2]
    // 将选中的标签名保存到表单回显中
    checkedTagNames.value = checkedTag.map(item => item.name);  // ['zs', 'lsi']
}

</script>

<style>
.el-form-item__content {
    width: 250px;
}

.el-form-item {
    margin-bottom: 20px;
}

/* .flex-end .el-form-item__content {
    width: auto;
} */
</style>